import React from 'react';
import { connect } from 'react-redux';
import { parseQueryString } from './../../utils';
import * as actions from './../../actions/a_personal_info';
import { MobileIcon, NameIcon, CompanyIcon } from './../../icons';
import { Toast } from 'react-weui';
import BindView from './../bind';

class InfoView extends React.Component {

  componentDidMount() {
    document.title = '我的信息';

    let {
      location = {}
    } = this.props;

    let query = parseQueryString(location.search || '?code=');
    // this.props.getPersonalInfo(query.code);
    this.props.getPersonalInfo('shengjing360');
  }

  render() {

    let {
      state,
      error
    } = this.props;

    let {
      headImgUrl = window.restConfig.img + '/portrait.png',
      nickName = '',
      mobile = '',
      name = '',
      companies = []
    } = state;

    companies = (companies&&companies.length > 0) ? companies : [{
      name: ''
    }];
    if (state.doBind === false) {
      return <div className='myinfo'>
        <div className='head'>
          <div className='portrait'>
            <img src={headImgUrl} alt='' />
          </div>
          <h3>{nickName}</h3>
        </div>
        <div className='weui-cells'>
          <div className='weui-cell'>
            <div className='weui-cell__hd'><MobileIcon /></div>
            <div className='weui-cell__bd'>
              <p>手机号码</p>
            </div>
            {
              mobile ? <div className='weui-cell__ft'>{mobile}</div> : <div className='weui-cell__ft link'
                onClick={() => {
                  this.props.stateChange('doBind', true);
                }}
              >绑定</div>
            }
          </div>
          <div className='weui-cell'>
            <div className='weui-cell__hd'><NameIcon /></div>
            <div className='weui-cell__bd'>
              <p>姓名</p>
            </div>
            <div className='weui-cell__ft'>{name}</div>
          </div>
          {
            companies.map((item, index) => {
              return <div className='weui-cell' key={index + ''}>
                <div className='weui-cell__hd'>{(index === 0) && <CompanyIcon />}</div>
                <div className='weui-cell__bd'>
                  {(index === 0) && <p>公司</p>}
                </div>
                <div className='weui-cell__ft'>{item.name}</div>
              </div>
            })
          }
        </div>
        <div className="weui-footer">
          <p className="weui-footer__text">咨询热线: <a href='tel:400-706-0016'>400-706-0016</a></p>
        </div>
        <Toast iconSize="" icon="warn" show={error.hasError}>发生了网络错误</Toast>
      </div>
    } else {
      return <BindView
        fromMsg={true}
        backHandler={() => {
          this.props.stateChange('doBind', false);
        }}
      />
    }
  }
}

export default connect((store) => {
  return {
    ...store.personalInfo
  }
}, {
    ...actions
  })(InfoView);